<template>
  <el-container class="personal-center">
    <!-- 左侧导航 -->
    <el-aside width="250px" class="aside">
      <!-- 用户信息 -->
      <div class="user-info">
        <el-avatar :size="80" :src="user.avatar || defaultAvatar"></el-avatar>
        <div class="user-name">{{ user.name || '加载中...' }}</div>
      </div>

      <!-- 导航菜单 -->
      <el-menu
        :default-active="selectedModule"
        class="el-menu-vertical"
      >
        <el-menu-item index="Courses" @click="selectedModule = 'Courses'">
          <i class="el-icon-reading"></i>
          <span slot="title">教学课堂</span>
        </el-menu-item>
        <el-menu-item index="Projects" @click="selectedModule = 'Projects'">
          <i class="el-icon-suitcase"></i>
          <span slot="title">资源中心</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容 -->
    <el-main class="main-content">
      <keep-alive>
        <component :is="selectedModule"></component>
      </keep-alive>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
import Courses from "@/views/TeachingClassrooms.vue";
import Projects from "@/views/ResourceManager.vue";

export default {
  name: "PersonalCenter",
  components: { Courses, Projects },
  data() {
    return {
      selectedModule: "Courses", // 默认显示课程页面
      user: {
        name: "",
        email: "",
        experience: 0,
        avatar: "",
      },
      defaultAvatar: "https://www.gravatar.com/avatar/00000000000000000000000000000000?s=200",
    };
  },
  mounted() {
    this.fetchUserInfo();
  },
  methods: {
    async fetchUserInfo() {
      try {
        const userId = this.getUserId();
        const response = await axios.get(`/api/User/getUserById`, { params: { id: userId } });

        if (response.data.code === "200" && response.data.data) {
          const userData = response.data.data;
          this.user.name = userData.username || "未知用户";
          this.user.email = userData.email || "未设置";
          this.user.experience = userData.experience || 0;
          this.user.avatar = userData.picture
            ? `/api/${userData.picture.replace(/\\/g, "/")}`
            : this.defaultAvatar;
        } else {
          console.error("获取用户信息失败:", response.data.message);
        }
      } catch (error) {
        console.error("API 请求错误:", error);
      }
    },
    getUserId() {
      return localStorage.getItem("id") || "defaultUser";
    },
  },
};
</script>

<style scoped>
.personal-center {
  height: 100vh;
  display: flex;
  background-color: #f5f5f5;
}

.aside {
  background-color: #fff;
  border-right: 1px solid #ddd;
  padding-top: 20px;
}

.user-info {
  text-align: center;
  margin-bottom: 20px;
}

.user-name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.el-menu {
  border-right: none;
}

.main-content {
  flex: 1;
  padding: 20px;
}
</style>
